/**
 * 刷卡设置参数 - 弹窗
 * @author xiaoxujs
 */

import { Form, Input, message, Modal, Radio } from "antd";
import { FC, useEffect, useState } from "react";
import { IIYckzZyLoadControlParamSetModeQueryVOS } from "../../../../../type/remoteControl/loadingControlList";
import { postYckzZyLoadControlModeUpdate } from "../../../api";
import { JinggaoBox } from "../../style";
import { useWindowFontSize } from "../../../../../assets/fun/Antd/configprovider";

const ErweimaSetParamsModule: FC<{
  open: boolean,
  handleSetCallback: () => void;
  clickData?: IIYckzZyLoadControlParamSetModeQueryVOS,
  clickId?: string;
}> = ({
  open,
  handleSetCallback,
  clickData,
  clickId
}) => {

    const [form] = Form.useForm<IIYckzZyLoadControlParamSetModeQueryVOS>();

    const [loading, setLoading] = useState(false);

    useEffect(() => {
      if (clickData) {
        form.setFieldsValue(clickData)
      }
    }, [clickData, form])
    const handleOk = async () => {
      const values = await form.validateFields();
      console.log()
      if (clickId) {
        setLoading(true);
        const { code, msg } = await postYckzZyLoadControlModeUpdate({
          ...values,
          barrierId: clickData && clickData.barrierId,
          type: 1,
          id: clickId
        }) as { code: number; msg: string };
        if (code === 20000) {
          form.resetFields();
          handleSetCallback();
        } else {
          message.error(msg)
        }
        setLoading(false)

      }

    };

    const handleCancel = () => {
      handleSetCallback();
    };
    const jinggao = <JinggaoBox>
    <span className="iconfont">&#xe649;</span>
    <div>注:选择后展示HTTP请求地址(填入设备中)，如:http://vip.qz.com/readCard/lbwl</div>
  </JinggaoBox>
    return <Modal     width={useWindowFontSize(484)} title="设置二维码参数" confirmLoading={loading} open={open} onOk={handleOk} onCancel={handleCancel}>
      <Form
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 14 }}
        form={form}
      >
        <Form.Item<IIYckzZyLoadControlParamSetModeQueryVOS>
          label="设备序列号"
          name="serial"
          rules={[{ required: true, message: '请输入设备序列号!' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item<IIYckzZyLoadControlParamSetModeQueryVOS>
          label="设备品牌"
          name="brand"
          rules={[{ required: true, message: '请选择设备品牌!' }]}
          extra={jinggao}
        >
          <Radio.Group >
            <Radio value='蓝边物联'>蓝边物联</Radio>
          </Radio.Group>
        </Form.Item>

      </Form>
    </Modal>
  }

export default ErweimaSetParamsModule;